import { Col, InputNumber, Row, Slider } from 'antd';
import { OmitProps } from 'antd/lib/transfer/ListBody';
import { useState } from 'react';


const DecimalStep = (props) => {
    const [inputValue, setInputValue] = useState(0);
    const onChange = (value) => {
      if (isNaN(value)) {
        return;
      }
      setInputValue(value);
      localStorage.setItem(props.title,value)
    };
    
    return (
    <div>
      <h4 style={{textAlign:"left"}}>{props.title}</h4>
      <Row>
        
        <Col span={18}>
          <Slider
            min={0}
            max={1}
            onChange={onChange}
            value={typeof inputValue === 'number' ? inputValue : 0}
            step={0.01}
          />
        </Col>
        <Col span={6}>
          <InputNumber
            min={0}
            max={1}
            style={{
              margin: '0 16px',
            }}
            step={0.01}
            value={inputValue}
            onChange={onChange}
          />
        </Col>
      </Row>
    </div>
    );
  };

  export default DecimalStep;